<template>
  <view class="container">
    <!-- 近期研学 -->
    <view class="info">
      <view class="info-des">
        <view class="label">
          <text>近期比赛</text>
          <view class="shadow"></view>
        </view>
        <view class="des">
          <text>赢取丰厚奖品</text>
          <view class="point">
            <view class="trangle"></view>
          </view>
        </view>
      </view>
      <view class="yan-list">
        <view class="list_item" v-for="(item, index) in teach" :key="index">
          <image :src="item.url" mode="widthFix" class="list_img"></image>
          <view class="con-main">
            <view class="yan-top">
              <view class="list_text">
                <view class="time">{{ item.time }}</view>
                <view class="title">{{ item.title }}</view>
              </view>
            </view>
            <view class="yan-bottom">
              <view class="yarn_left">
                {{ item.des }}
              </view>
              <view class="btn">
                <text>立即报名</text>
                <view class="trangle"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      teach: [
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/contest.png",
          title: "第一届启蒙色彩大赛",
          time: "2024/07/08-2024/07/14",
          des: "投稿范围：全国均可投稿",
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/contest.png",
          title: "第一届启蒙色彩大赛",
          time: "2024/07/08-2024/07/14",
          des: "投稿范围：全国均可投稿",
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/contest.png",
          title: "第一届启蒙色彩大赛",
          time: "2024/07/08-2024/07/14",
          des: "投稿范围：全国均可投稿",
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/contest.png",
          title: "第一届启蒙色彩大赛",
          time: "2024/07/08-2024/07/14",
          des: "投稿范围：全国均可投稿",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  padding: 0 24rpx 100rpx;
}

.info {
  // margin-top: 46rpx;
  padding-top: 28rpx;

  .info-des {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      position: relative;

      text {
        font-family: HarmonyOS Sans SC;
        font-weight: 900;
        font-size: 38rpx;
        color: #000000;
        z-index: 100;
      }

      .shadow {
        margin-top: -12rpx;
        z-index: 99;
        width: 100%;
        height: 8rpx;
        background: #a2ff00;
      }
    }

    .des {
      display: flex;
      align-items: center;

      text {
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        transform: scale(0.916667);
        color: #747474;
      }

      .point {
        position: relative;
        margin-left: 10rpx;
        width: 20rpx;
        height: 20rpx;
        background-color: #a2ff00;
        border-radius: 50%;

        .trangle {
          position: absolute;
          top: 4rpx;
          left: 4rpx;
          // transform: translate(-50%, -50%);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 13.856rpx solid #fff;
          transform: rotate(90deg);
        }
      }
    }
  }

  .yan-list {
    .list_item {
      background-color: #fff;
      margin-top: 20rpx;
      border-radius: 20rpx;
      position: relative;

      .list_img {
        width: 100%;
        height: 852rpx !important;
        border-radius: 20rpx;
      }

      .con-main {
        position: absolute;
        top: 0;
        padding: 36rpx 32rpx 36rpx 48rpx;
        width: 100%;
        height: 100%;

        .yan-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .list_text {
            .time {
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 30rpx;
              color: #ffffff;
              text-shadow: 0px 4rpx 20rpx rgba(52, 52, 52, 0.5);
            }

            .title {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 46rpx;
              color: #ffffff;
              text-shadow: 0px 4rpx 20rpx rgba(52, 52, 52, 0.5);
              margin-top: 32rpx;
            }
          }
        }

        .yan-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 600rpx;

          .yarn_left {
            height: 30rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #ffffff;
            text-shadow: 0px 4rpx 20rpx rgba(52, 52, 52, 0.5);
          }

          .btn {
            width: 166rpx;
            height: 72rpx;
            background: #a2ff00;
            border-radius: 36rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #030400;
            line-height: 72rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            .trangle {
              width: 0;
              height: 0;
              border-left: 8rpx solid transparent;
              border-right: 8rpx solid transparent;
              border-bottom: 14.248rpx solid #000;
              transform: rotate(90deg);
              margin-left: 8rpx;
            }
          }
        }
      }
    }
  }
}
</style>
